<template>


  <div class="main-box">
    <div class="top-box">
      <h4 style="letter-spacing:6px;font-weight:bold">西安市勤务基础数据平台</h4>
    </div>

    <div class="right-box" :style="{right:drawer? '0px':'-330px'}">
      <div class="right-btn">
        <img :src="drawerImg" alt="" @click="changeRight">
      </div>
      <div class="right-content" >
        <div class="searchAreaBox">
          <div class="searchArea">
            <input type="text" name="searchArea" placeholder="输入搜索关键字">
            <i class="searchAreaBtn fa fa-search" @click="search()"></i>
          </div>
          <div class="clearft"></div>
        </div>
        <ul id="homeTree" class="ztree tree" style="margin-left:50px;"></ul>
      </div>

    </div>

    <div class="footer-top" :style="{bottom:showfooter.length >0? '98px':'-98px'}">

      <div class="footer-top-main">
        <div v-for="(item,index) in showfooter" :title="item.name"
             @click="secoundToolClick(item)" :key="item.name"
             class="ft"
             @mouseenter="changeImageSrc(index,1)"
             @mouseleave="changeImageSrc(index,0)"
        >
          <img :src="item.flag == 1?item.src_h:item.src" alt="">
        </div>

      </div>
    </div>
    <div class="footer-box">
      <div class="footer-main" @click.self.stop="hideSecoundTool()">
        <el-row :gutter="10">
          <el-col :span="6">
            <div title="标绘"
                 :class="flag1 == 1 ? 'gj1_h' : 'gj1'"
                 @click.self.stop="bottomClick(1)"
            ></div>
          </el-col>
          <el-col :span="6">
            <div title="模型"
                 :class="flag1 == 2 ? 'gj2_h' : 'gj2'"
                 @click.self.stop="bottomClick(2)"
            ></div>
          </el-col>
          <el-col :span="6">
            <div title="测量"
                 :class="flag1 == 3 ? 'gj3_h' : 'gj3'"
                 @click.self.stop="bottomClick(3)"
            ></div>
          </el-col>
          <el-col :span="6">
            <div title="工具"
                 :class="flag1 == 4 ? 'gj4_h' : 'gj4'"
                 @click.self.stop="bottomClick(4)"
                 @mouseenter="onEnterTd"
                 @mouseleave="onLeaveTd"
            ></div>
          </el-col>
        </el-row>
        <div class="gj-btn" v-show="gjBtnType" @click="openModal2"></div>
      </div>
    </div>

    <div class="modal1" v-show="showModel1">
      <div style="padding: 10px">
        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"
        >对象信息</span
        >
        <img src="@/assets/imgs/关闭.png" alt="" @click="closeModal1"/>
      </div>
      <div style="padding: 20px">
        <div style="display: flex">
          <span style="color: rgb(255, 255, 255);width: 50px;line-height: 42px;}">名称&nbsp; :</span>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div style="float: right; padding: 20px">
          <img src="@/assets/imgs/btn2.png" alt=""/>
          <img src="@/assets/imgs/btn3.png" alt="" style="margin-right: 20px;"/>


        </div>
      </div>
    </div>
    <div class="modal2" v-show="showModel2">
      <div style="padding: 20px 40px">
        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"
        >对象信息</span
        >
        <img src="@/assets/imgs/关闭.png" alt="" @click="closeModal2"/>
      </div>
      <div style="padding: 20px">
        <el-form
            ref="form" :model="formState" label-width="120px"
        >
          <el-row class="row-box" :gutter="6">
            <el-col class="gutter-row" :span="12">
              <el-form-item label="名称" name="名称">
                <el-input type="text" v-model="formState.名称"/>
              </el-form-item>
            </el-col>
            <el-col class="gutter-row" :span="12">
              <el-form-item label="颜色">
                <el-input type="text" v-model="formState.名称"/>
              </el-form-item>
            </el-col>
            <el-col class="gutter-row" :span="12">
              <el-form-item label="经度" name="经度">
                <el-input type="text" v-model="formState.经度"/>
              </el-form-item>
            </el-col>
            <el-col class="gutter-row" :span="12">
              <el-form-item label="最近距离" name="最近距离">
                <el-input type="text" v-model="formState.最近距离"/>
              </el-form-item>
            </el-col>
            <el-col class="gutter-row" :span="12">
              <el-form-item label="纬度" name="纬度">
                <el-input type="text" v-model="formState.纬度"/>
              </el-form-item>
            </el-col>
            <el-col class="gutter-row" :span="12">
              <el-form-item label="最远距离" name="最远距离">
                <el-input type="text" v-model="formState.最远距离"/>
              </el-form-item>
            </el-col>
            <el-col class="gutter-row" :span="12">
              <el-form-item label="高度" name="高度">
                <el-input v-model="formState.最远距离"/>
              </el-form-item>
            </el-col>
            <el-col class="gutter-row" :span="12">
              <el-form-item label="跟随视野缩放" name="跟随视野缩放">
                <el-input type="text" v-model="formState.名称"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div>
          <el-row style="float: right; padding-right: 20px">

            <img src="@/assets/imgs/btn1.png" alt=""/>
            <img src="@/assets/imgs/btn2.png" alt=""/>
            <img src="@/assets/imgs/btn3.png" alt=""/>
          </el-row>
        </div>
      </div>
    </div>
    <!--    <div class="modal3" v-show="false">-->
    <!--      <div style="padding: 10px">-->
    <!--        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"-->
    <!--        >大唐不夜城</span-->
    <!--        >-->
    <!--        <img src="@/assets/imgs/关闭.png" alt="" @click="closeModal3"/>-->
    <!--      </div>-->
    <!--      <div style="padding: 20px">-->
    <!--        <el-row>-->
    <!--          <div class="head-txt-box">-->
    <!--            <img src="@/assets/imgs/dtbyc1.png" alt=""/>-->
    <!--          </div>-->
    <!--          <div class="head-txt-box"><img src="@/assets/imgs/dtbyc2.png" alt=""/></div>-->
    <!--        </el-row>-->
    <!--      </div>-->
    <!--      <div style="padding: 20px 50px">-->
    <!--        <el-input type="text" placeholder="文本框"></el-input>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="modal4" v-show="false">-->
    <!--      <div style="padding: 10px">-->
    <!--        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"-->
    <!--        >操作工具</span-->
    <!--        >-->
    <!--        <img src="@/assets/imgs/关闭.png" alt="" @click="closeModel4"/>-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <el-form-item label="名称" name="名称" style="padding: 20px">-->
    <!--          <el-input type="text"/>-->
    <!--        </el-form-item>-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <el-row style="float: right; padding-right: 20px">-->
    <!--          <img src="@/assets/imgs/btn2.png" alt=""/>-->
    <!--          <img src="@/assets/imgs/btn3.png" alt=""/>-->
    <!--        </el-row>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>


</template>

<script>


export default {
  name: "HomeWork",
  data() {
    return {
      drawer: false,
      drawerImg: require('@/assets/imgs/展开按钮切图拷贝.png'),
      direction: 'rtl',
      flag1: 0,
      footerArr: [
        {
          id: 1,
          flag: 0,
          child: [
            {
              name: '点',
              flag: 0,
              src: require('@/assets/imgs/点未选中切图.png'),
              src_h: require('@/assets/imgs/点选中切图.png'),
            },
            {
              name: '线',
              flag: 0,
              src: require('@/assets/imgs/线未选中切图.png'),
              src_h: require('@/assets/imgs/线选中切图.png')
            },
            {
              name: '面',
              flag: 0,
              src: require('@/assets/imgs/面积未选中切图.png'),
              src_h: require('@/assets/imgs/面积选中切图.png')
            },
            {
              name: '围栏',
              flag: 0,
              src: require('@/assets/imgs/围栏未选中切图.png'),
              src_h: require('@/assets/imgs/围栏选中切图.png')
            },
            {
              name: '标注',
              flag: 0,
              src: require('@/assets/imgs/标注未选中切图.png'),
              src_h: require('@/assets/imgs/标注选中切图.png')
            }
          ]
        },
        {
          id: 2,
          flag: 0,
          child: [
            {
              name: '模型',
              flag: 0,
              src: require('@/assets/imgs/工具二级展开按钮未选中切图.png'),
              src_h: require('@/assets/imgs/工具二级展开按钮选中切图-拷贝.png')
            }
          ]
        }, {
          id: 3,
          flag: 0,
          child: [
            {
              name: '坐标 ',
              flag: 0,
              src: require('@/assets/imgs/坐标未选中切图.png'),
              src_h: require('@/assets/imgs/坐标按钮选中切图.png')
            },
            {
              name: '长度',
              flag: 0,
              src: require('@/assets/imgs/长度未选中切图.png'),
              src_h: require('@/assets/imgs/长度选中切图.png')
            },
            {
              name: '高度',
              flag: 0,
              src: require('@/assets/imgs/高度未选中切图.png'),
              src_h: require('@/assets/imgs/高度选中切图.png')
            },
            {
              name: '面积',
              flag: 0,
              src: require('@/assets/imgs/面积未选中切图.png'),
              src_h: require('@/assets/imgs/面积选中切图.png')
            }
          ]
        }, {
          id: 4,
          flag: 0,
          child: [
            {
              name: '重点部位统计 ',
              flag: 0,
              src: require('@/assets/imgs/重点部位未选中切图.png'),
              src_h: require('@/assets/imgs/重点部位统计选中切图.png')
            },
            {
              name: '制高点统计',
              flag: 0,
              src: require('@/assets/imgs/制高点统计未选中切图.png'),
              src_h: require('@/assets/imgs/制高点统计选中切图.png')
            },
            {
              name: '管线统计',
              flag: 0,
              src: require('@/assets/imgs/管线工具未选中切图.png'),
              src_h: require('@/assets/imgs/管线工具选中切图.png')
            },
            {
              name: '高清出图',
              flag: 0,
              src: require('@/assets/imgs/高清出图未选中切图.png'),
              src_h: require('@/assets/imgs/高清出图选中切图.png')
            }
          ]
        }
      ],
      showfooter: [],
      showModel4: false,
      gjBtnType: false,
      formState: {},
      showModel1: false,
      showModel2: false,


      zTreeNodes:  [
        {
          "id": 1,
          "name": "根节点",
          "parentId": 0,
          "isSite": 0,
          "typeCode": null,
          "typeName": null,
          "sortNumber": 1,
          "children": [
            {
              "id": 11,
              "name": "二级节点1-1",
              "parentId": 1,
              "isSite": 0,
              "typeCode": null,
              "typeName": null,
              "sortNumber": 1,
              "children": [
                {
                  "id": 111,
                  "name": "三级节点1-1-1",
                  "parentId": 1,
                  "isSite": 0,
                  "typeCode": null,
                  "typeName": null,
                  "sortNumber": 1
                },
                {
                  "id": 112,
                  "name": "三级节点1-1-2",
                  "parentId": 1,
                  "isSite": 0,
                  "typeCode": null,
                  "typeName": null,
                  "sortNumber": 1
                }
              ]
            },
            {
              "id": 12,
              "name": "二级节点1-2",
              "parentId": 1,
              "isSite": 0,
              "typeCode": null,
              "typeName": null,
              "sortNumber": 1,
              "children": [
                {
                  "id": 121,
                  "name": "三级节点1-2-1",
                  "parentId": 12,
                  "isSite": 0,
                  "typeCode": null,
                  "typeName": null,
                  "sortNumber": 1
                },
                {
                  "id": 112,
                  "name": "三级节点1-2-2",
                  "parentId": 12,
                  "isSite": 0,
                  "typeCode": null,
                  "typeName": null,
                  "sortNumber": 1
                }
              ]
            },
            {
              "id": 13,
              "name": "二级节点1-3",
              "parentId": 1,
              "isSite": 0,
              "typeCode": null,
              "typeName": null,
              "sortNumber": 1,
              "children": [
                {
                  "id": 131,
                  "name": "三级节点1-3-1",
                  "parentId": 13,
                  "isSite": 0,
                  "typeCode": null,
                  "typeName": null,
                  "sortNumber": 1
                },
                {
                  "id": 132,
                  "name": "三级节点1-3-2",
                  "parentId": 13,
                  "isSite": 0,
                  "typeCode": null,
                  "typeName": null,
                  "sortNumber": 1
                }
              ]
            },
            {
              "id": 14,
              "name": "二级节点1-4",
              "parentId": 1,
              "isSite": 0,
              "typeCode": null,
              "typeName": null,
              "sortNumber": 1,
              "children": [
                {
                  "id": 141,
                  "name": "三级节点1-4-1",
                  "parentId": 14,
                  "isSite": 0,
                  "typeCode": null,
                  "typeName": null,
                  "sortNumber": 1
                },
                {
                  "id": 142,
                  "name": "三级节点1-4-2",
                  "parentId": 14,
                  "isSite": 0,
                  "typeCode": null,
                  "typeName": null,
                  "sortNumber": 1
                }
              ]
            }
          ]
        }
      ],
      checkNodeKeys: [31895, 31896, 31898, 31899],
      zTreeCheck: {
        enable: true,
      },
      zTreeSimpleData: {
        enable: true,
      },
      keyword: "",
    };
  },
  methods: {
    changeRight() {
      this.drawer = !this.drawer
      if (this.drawer) {
        this.drawerImg = require('@/assets/imgs/收缩按钮切图.png')
      } else {
        this.drawerImg = require('@/assets/imgs/展开按钮切图拷贝.png')
      }
    },
    changeImageSrc(index, num) {
      this.showfooter[index].flag = num
    },
    bottomClick(num) {
      this.flag1 = num;
      this.footerArr[num - 1].flag = 1;
      this.showfooter = this.footerArr[num - 1].child;

    }
    ,
    secoundToolClick(item) {
      this.$message.success(item.name);
      this.showModel1 = true;
    }
    ,
    openModal2() {
      this.$message.success("工具按钮");
      this.showModel2 = true;
    },
    //鼠标进入的事件。
    onEnterTd() {
      this.gjBtnType = true;
    },
    //鼠标离开的事件。
    onLeaveTd() {
      setTimeout(() => {
        //代码
        this.gjBtnType = false;
      }, 800);
    },
    hideSecoundTool() {
      this.showfooter = [];
    },
    closeModal1() {
      this.showModel1 = false;
    },
    closeModal2() {
      this.showModel2 = false;
    },

    search(){
      searchArea();
    },

    addNode(treeNode){
      this.$message.success(treeNode.name);
      this.showModel1 = true;
    }
  },
  mounted() {
    initTree();
    window.addNode = this.addNode;
  },
}
</script>

<style lang="less" scoped>

.main-box {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/imgs/main_bg.png");
  overflow: hidden;
  background-size: 100%;

}

.top-box {
  position: absolute;

  width: 100%;
  height: 129px;
  top: 0px;
  z-index: 1;
  background-image: url("@/assets/imgs/title.png");
  text-align: center;
  background-size: 100% 100%;

  h4 {
    color: #fff;
    font-size: 36px;
    line-height: 20px;
  }
}


.right-box {
  position: absolute;
  height: calc(100% - 100px);
  top: 80px;
  z-index: 1;
  right: 0px;
  color: #fff;
  width: 450px;


  .right-btn {
    float: left;
    width: 107px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .right-content {
    background-image: url('@/assets/imgs/right-bg.png');
    width: 342px;
    float: left;
    height: 100%;
    padding-top: 20px;
  }
}

::v-deep .el-drawer {
  margin-top: 50px;
  margin-bottom: 30px;
  padding-left: 20px;
  background: url("@/assets/imgs/right-bg.png");
}

.el-col {
  margin-top: 25px;
  display: flex;
  justify-content: center
}


.footer-top {
  position: absolute;
  width: 100%;
  height: 81px;
  bottom: -98px;
  z-index: 1;

  .footer-top-main {
    width: 456px;
    height: 100%;
    margin: 0 auto;
    background-image: url("@/assets/imgs/工具二级展开背景切图.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .ft {
      //background: url("@/assets/imgs/工具二级展开按钮未选中切图.png") no-repeat;
      width: 50px;
      height: 50px;
      cursor: pointer;
      margin: 0 15px;
    }

    .ft_h {

      width: 50px;
      height: 50px;
      cursor: pointer;
      margin: 15px auto;
      margin-right: 30px;
      background-position-y: 50%;
    }


  }
}


.footer-box {
  position: absolute;
  width: 100%;
  height: 99px;
  bottom: 0px;
  z-index: 1;
  background-image: url("@/assets/imgs/工具栏背景切图.png");
  background-size: 100% 100%;

  .footer-main {
    width: 360px;
    height: 80px;
    padding-left: 100px;
    padding-right: 100px;
    position: absolute;
    left: 44%;
    top: 0%;
    margin-left: -160px; //要宽度的一半
    text-align: center;

    .gj1 {
      background: url("@/assets/imgs/标绘未选中图标.png") no-repeat;
      width: 30px;
      height: 30px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj1_h {
      background: url("@/assets/imgs/标绘选中图标.png") no-repeat;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj1:hover {
      background: url("@/assets/imgs/标绘选中图标.png") no-repeat;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }

    .gj2 {
      background: url("@/assets/imgs/标注未选中图标.png") no-repeat;
      width: 30px;
      height: 30px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj2_h {
      background: url("@/assets/imgs/标注选中图标.png") no-repeat;
      width: 40px;
      height: 40px;

    }

    .gj2:hover {
      background: url("@/assets/imgs/标注选中图标.png") no-repeat;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj3 {
      background: url("@/assets/imgs/测量未选中图标.png") no-repeat;
      width: 30px;
      height: 30px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj3_h {
      background: url("@/assets/imgs/测量选中切图.png") no-repeat;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj3:hover {
      background: url("@/assets/imgs/测量选中切图.png") no-repeat;
      cursor: pointer;
      width: 40px;
      height: 40px;
    }

    .gj4 {
      background: url("@/assets/imgs/工具未选中图标.png") no-repeat;
      width: 30px;
      height: 30px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj4_h {
      background: url("@/assets/imgs/工具选中图标.png") no-repeat;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj4:hover {
      background: url("@/assets/imgs/工具选中图标.png") no-repeat;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-position-y: 50%;
    }

    .gj-btn {
      background: url("@/assets/imgs/注释背景切图.png");
      width: 91px;
      height: 55px;
      position: absolute;
      top: -14px;
      right: 25px;
      cursor: pointer;
    }
  }
}

.modal1 {
  width: 557px;
  height: 365px;
  background: url("@/assets/imgs/大唐不夜城弹框背景切图.png");
  position: absolute;
  z-index: 1111111111111111;
  cursor: pointer;
  margin-top: 10%;
  margin-left: 30%;

  /deep/ .el-input__inner {

    background: none;
    border: 1px solid #2787c8;
    color: #2787c8;
  }

  img {
    float: right;
  }
}

.modal3 {
  width: 557px;
  height: 365px;
  background: url("@/assets/imgs/大唐不夜城弹框背景切图.png");
  position: absolute;
  z-index: 1111111111111111;
  cursor: pointer;
  margin-top: 10%;
  margin-left: 50%;

  img {
    float: right;
  }
}

.modal2 {
  width: 780px;
  height: 548px;
  background: url("@/assets/imgs/对象信息背景切图.png");
  position: absolute;
  top: 100px;
  left: 0px;
  z-index: 1111111111111111;
  cursor: pointer;

  /deep/ .el-form-item__label {
    color: #fff;
  }

  /deep/ .el-input__inner {

    background: none;
    border: 1px solid #2787c8;
    color: #2787c8;
  }

  img {
    float: right;
  }
}

.modal4 {
  width: 557px;
  height: 365px;
  background: url("@/assets/imgs/大唐不夜城弹框背景切图.png");
  position: absolute;
  z-index: 1111111111111111;
  cursor: pointer;
  margin-top: 10%;
  margin-left: 50%;

  img {
    float: right;
  }
}





</style>
<style lang="less">
.node_name_0 {
  width: 121px;
  height: 40px;
  background: url("@/assets/imgs/一级按钮未选中切图.png");
  text-align: center;
  //line-height: 70px;
  cursor: pointer;
  display: inline-block;
  .fa{
    display: none;
  }
}

.node_name_0:hover {
  background: url("@/assets/imgs/一级按钮选中切图.png");
  .fa{
    display: none;
  }
}

.node_name_1 {
  width: 100px;
  height: 32px;
  background: url("@/assets/imgs/二级标题未选中切图.png");
  text-align: center;
  //line-height: 36px;
  margin: 0px 0px 0px;
  cursor: pointer;
  display: inline-block;
  .fa{
    display: none;
  }
}

.node_name_1:hover {
  background: url("@/assets/imgs/二级按钮选中切图.png");
  .fa{
    display: none;
  }
}



.node_name_2 {
  width: 101px;
  height: 32px;
  background: url("@/assets/imgs/三级标题未选中按钮切图.png");
  text-align: center;
  //line-height: 32px;
  margin: 0px 0px 0px;
  display: inline-block;

  cursor: pointer;
  .fa{
    display: none;
  }
}

.node_name_2:hover {
  background: url("@/assets/imgs/三级标题选中切图.png");
  .fa{
    display: none;
  }
}

.node_name_3{
  width: 101px;
  height: 32px;
  background: url("@/assets/imgs/三级标题未选中按钮切图.png");
  text-align: center;
  line-height: 32px;
  margin: 0px 0px 0px;
  display: inline-block;

  cursor: pointer;
  .fa{
    display: none;
  }
}

.node_name_3:hover {
  background: url("@/assets/imgs/三级标题选中切图.png");
  .fa{
    display: none;
  }
}
.ztree{
  height: 100%;
}

.searchArea input{
  background: none;
  border: 1px solid #2787c8;
  color: #2787c8;
}
</style>